<template>
  <div>
    <div class="colorBox" :style="{background:rgb}"></div>
    <div>
      R:<input type="range"  max="250" v-model="r"/> 
      G:<input type="range"  max="250" v-model="g"/>
      B:<input type="range"  max="250" v-model="b"/> 
    </div>
  </div>
</template>
<script>
export default {
    data () {
        return {
            r:0,
            g:0,
            b:0
        }
    },
    computed: {
        rgb(){
            return `rgb(${this.r},${this.g},${this.b})`
        }
    }
}
</script>
<style scoped>
.colorBox {
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
}
</style>